<template>
	<view>
		<u-navbar :is-back="true" :title="title"></u-navbar>
		<map id='mapBox' :longitude='longitude' :latitude='latitude' :markers="markers"></map>
		<view class="goto" v-if="showGoTO">
			<view class="goto_left">
				<view class="add_name">
					{{addressName}}
				</view>
				<view class="add_desc">
					{{addressDesc}}
				</view>
			</view>
			<view class="goto_right" @click="gotoHere">
				去这里
			</view>
		</view>
	</view>
</template>

<script>
	import amap from '../../common/amap-wx.js';
	import {
		key
	} from '../../common/map-key.js';

	export default {
		data() {
			return {
				title: '',
				amapPlugin: null,
				showGoTO: false,
				addressName: '',
				addressDesc: "",
				longitude: '',
				latitude: '',
				markers: ''
			}
		},
		onLoad() {
			this.amapPlugin = new amap.AMapWX({
				key: key
			});
			this.getRegeo()
		},
		methods: {
			ellipsis(value, len) {
				if (!value) return ''
				if (value.length > len) {
					return value.slice(0, len) + '...'
				}
				return value
			},
			getRegeo() {
				let _this = this
				_this.amapPlugin.getRegeo({
					success: (data) => {
						uni.chooseLocation({
							success: function(res) {
								_this.showGoTO = true
								_this.title = res.name
								_this.addressName = _this.ellipsis(res.name, 14)
								_this.addressDesc = _this.ellipsis(res.address, 18)

								_this.longitude = res.longitude;
								_this.latitude = res.latitude;
								_this.markers = []
								_this.markers.push({
									id: 2,
									latitude: res.latitude,
									longitude: res.longitude,
									width: 20,
									height: 30
								});
								_this.$store.commit('setDestination', res.name);
								_this.$store.commit('setDestinationLng', res.longitude);
								_this.$store.commit('setDestinationLat', res.latitude);

							}
						});

					},
					fail: function(err) {
						console.log(err.errMsg)
					}
				});
			},
			//点击去这里
			gotoHere() {
				uni.setStorageSync('search_type', 'go_type')
				uni.navigateTo({
					url: '/pages/route/route'
				})
			}
		}
	}
</script>

<style scoped lang="less">
	#mapBox {
		width: 100vw;
		height: 90vh;
	}

	.goto {
		width: 100vw;
		height: 10vh;
		background-color: #ffffff;
		position: absolute;
		left: 0;
		bottom: 0;
		z-index: 10;
		padding: 0 20rpx 0 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.goto_left {
		.add_name {
			font-size: 36rpx;
			font-weight: bold;
		}

		.add_desc {
			margin-top: 10rpx;
		}
	}

	.goto_right {
		padding: 20rpx 40rpx;
		border-radius: 50rpx;
		background-color: #467EFC;
		color: #ffffff;
	}
</style>